<template>
  <div id="app">
    <CodeRain></CodeRain>
    <div v-if="$route.path !== '/'" class="back-btn" @click="$router.push('/')">首页</div>
    <router-view/>
    <div style="right: 20px;" class="back-btn" @click="getApi">调用接口</div>
  </div>
</template>
<script>
import axios from 'axios'
import '@/api/axios.js'
import {cancelFetch, cancelAxios} from '@/scripts/取消请求/test.js'
import {anyToHash} from '@/scripts/任意类型转hash/index.js'
import CodeRain from '@/components/CodeRain'
import Event from "@/scripts/pubsub.js";
export default {
  components: {
    CodeRain,
  },
  created() {
    import('@/test/大任务分片/index.js')
    // const [fetch, abort] = cancelFetch('./scripts/animation.js', res => {console.log(res.blob())})
    let url = '/worker.js'
    const [fetch, abort] = cancelAxios(url, res => {console.log(res)})
    this.fetch = fetch
    this.abort = abort
    window.anyToHash = anyToHash
  },
  mounted () {
    this.getData()
    // 必须先订阅再发布，由于app的mounted比其他的更早，所以要异步请求
    // 或者放在事件里，如点击触发发布
    setTimeout(() => {
      Event.trigger("user", '老王不上班')
      this.$dialog.open()
    }, 50)

    this.$store.commit('getUserRole', ['CREATE', 'MODIFY', 'READONLY'])
    console.log('原始数据', this.$store.state.roles.toString(2))
    this.$store.dispatch('delRole', 'DELETE')
    // this.$store.dispatch('delRole', 'CREATE')
    setTimeout(() => {
      console.log('删除后数据', this.$store.state.roles.toString(2))
    })
  },
  data() {
    return {
      fetch: () => {},
      abort: () => {},
    }
  },
  methods: {
    getApi() {
      this.$server(() => this.fetch(), {target: this.$el});
      this.$server(() => this.abort(), {target: this.$el});
      this.$server(() => this.fetch(), {target: this.$el});
      this.$server(() => this.fetch(), {target: this.$el});
    },
    getData(pageNo = 1, pageSize) {
      return axios({  
        method: 'post',
        url: '/wuhan_gov/ebus/kftp/v1/service/esfgpxxnrapijk',
        data: {
          query: {
            pageNo,
            pageSize
          }
        },
        headers: {
          'x-tif-paasid': 'sjkfpt_key_zycsbb507501804150c3018044e3f5683271', 
          'x-tif-signature': 'xyciOiJIUzI1NiIsInR5cC', 
          'x-tif-timestamp': Date.now(), 
          'x-tif-nonce': "2fc62edd-03ee-4c32-8db8-e7e9c77ed05a", 
        }
      }).then(res => {
        console.log(res)
      })
    }
  },
}
</script>

<style lang="less">
* {
  box-sizing: border-box;
}
html, body, #app {
  width: 100%;
  height:100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
html {
  min-width: 1226px;
}
image {
  max-width: 100%;
}
.back-btn {
  position: fixed;
  top: 0px;
  right: 100px;
  line-height: 30px;
  color: #45627a;
  z-index: 999999;
  cursor: pointer;
}
</style>
